<style>
a{
    color: black;
    text-decoration: none;
}
</style>
<header class="bar bar-nav">    
    <h1 class="title">订单</h1>
</header>
<div class="content">
    <div class="buttons-tab">
      <a href="#tab1" class="tab-link active button">全部</a>
      <a href="#tab2" class="tab-link button">待付款</a>
      <a href="#tab3" class="tab-link button">已付款</a>
    </div>
    <div class="card">        
        <div class="tabs">
           <div id="tab1" class="tab active">
              <div class="content-block">
                   <div class="list-block media-list">
                      <ul>
                        <% @orders.each do |order| %>
                        <li class="item-content">                            
                          <div class="item-media">
                           <%= image_tag order.user.header_img_url,  style:"width:50px;height:50px;" %>
                          </div>
                          <div class="item-inner">
                          <a href="<%= "/mobile/apps/foods/#{order.id}" %>" >       
                            <div class="item-title-row">
                              <div class="item-title"><%= order.order_number %></div>
                            </div>
                            <div class="item-fater">
                              <%= order.is_pay? %>
                            </div>
                          </a>  
                          </div>    
                        </li>
                        <% end %>
                      </ul>
                    </div>
              </div>
            </div>

            <div id="tab2" class="tab">
              <div class="content-block">
                   <div class="list-block media-list">
                      <ul>
                        <% @orders.where(:is_pay => false).each do |order| %>
                        <li class="item-content">                            
                          <div class="item-media">
                           <%= image_tag order.user.header_img_url,  style:"width:50px;height:50px;" %>
                          </div>
                          <div class="item-inner">
                          <a href="<%= "/mobile/apps/foods/#{order.id}" %>" >       
                            <div class="item-title-row">
                              <div class="item-title"><%= order.order_number %></div>
                            </div>
                            <div class="item-fater">
                              <%= order.is_pay? %>
                            </div>
                          </a>  
                          </div>    
                        </li>
                        <% end %>
                      </ul>
                    </div>
              </div>
            </div>

            <div id="tab3" class="tab">
              <div class="content-block">
                   <div class="list-block media-list">
                      <ul>
                        <% @orders.where(:is_pay => true).each do |order| %>
                        <li class="item-content">                            
                          <div class="item-media">
                           <%= image_tag order.user.header_img_url,  style:"width:50px;height:50px;" %>
                          </div>
                          <div class="item-inner">
                          <a href="<%= "/mobile/apps/foods/#{order.id}" %>" >       
                            <div class="item-title-row">
                              <div class="item-title"><%= order.order_number %></div>
                            </div>
                            <div class="item-fater">
                              <%= order.is_pay? %>
                            </div>
                          </a>  
                          </div>    
                        </li>
                        <% end %>
                      </ul>
                    </div>
              </div>
            </div>
        </div> 
    </div> 

</div>